// src/views/Index.vue
<template class="box">
    <h1>入口案例页面！当前计数为：{{ counterStore.counter }}</h1>
    <Language></Language>
    <h1>{{ $t(langMap.app_title) }}</h1>
    <div class="box">
      <h1 class="header">测试本地模拟接口</h1>
      <SvgIcon
        name="renxiang"
        :size="60"
        style="color: pink"
      ></SvgIcon>
      <el-button type="primary" @click="Login">登录请求</el-button>
      <el-button type="success" @click="getUserInfo">获取用户信息</el-button>
    </div>
    <div>
      <el-select
        v-model="windowPath"
        value-key=""
        placeholder="输入路由地址"
        clearable
        filterable
        style="width: 200px">
        <el-option
          v-for="path in routerPaths"
          :key="path"
          :label="path"
          :value="path">
        </el-option>
      </el-select>
      <el-button @click="openWindow">新建窗口</el-button>
    </div>
    <el-button @click="refreshPage">刷新数据</el-button>
    <ul>
      <li>
        <span class="title">模拟1-10颗星星:</span>
        <span style="color: pink"> {{ starts }}</span>
      </li>
      <li>
        <span class="title">模拟2个用户:</span>
        <ul v-for="item in users" :key="item.id" class="user">
          <li>NAME：{{ item.name }} -- AGE：{{ item.age }} -- EMAIL：{{ item.email }}</li>
        </ul>
      </li>
    </ul>
    <router-link to="/hello">链接跳转</router-link><br/>
    <a @click="goTo('/hello')">点击跳转</a>
</template>
  
<script setup lang="ts">
  import { useRouter } from 'vue-router'
  import { useCounterStore } from '@/store/modules/counterStore'
  import langMap from '@/locales/LangMap'
  import Mock from 'mockjs';
  import { loginApi, getUserInfoApi } from '@/api/auth'
  import { ref } from "vue";
  import electronUtils from "@/utils/electron";

  // 登录
  function Login() {
    loginApi({ username: 'xxx', password: 'xxx' }).then(res => {
      console.log("dev独有的环境变量：" + import.meta.env.VITE_DEV_PARAM);
      console.log(`登录请求响应:=>${res.data.accessToken}`);
    })
  }

  // 获取用户信息
  function getUserInfo() {
    getUserInfoApi("xxaxxx").then(res => {
      console.log(`用户信息响应：=> userId:${res.data.userId}, nickName: ${res.data.nickName},age:${res.data.nickName}}`);
    })
}

  const counterStore = useCounterStore()
  const router = useRouter()

  // 刷新页面
  function refreshPage() {
    location.reload()
  }
  // 随机1-10颗星星
  const starts: string = Mock.mock({
    'starts|1-10': '★'
  }).starts;
  // 随机2个用户
  const users: [any] = Mock.mock({
    'array|2': [
      {
        id: '@id', // 随机id
        name: '@cname', // 随机中文名称
        'age|18-35': 18, // 随机年龄 18-35
        email: '@email' // 随机邮箱
      }
    ]
  }).array;

  const windowPath = ref("/hello");
  const routerPaths = ref<string[]>([]);
  //取到所有的路径
  routerPaths.value = router.getRoutes().map((item) => item.path);

  function openWindow() {
    electronUtils.openWindow(windowPath.value,JSON.stringify({
        message: "open new window",
      })
    )
  }

  function goTo(path: string) {
    router.push(path)
  }
</script>
  
<style lang="scss">
// 定义变量
$hoverColor: pink;

// 嵌套样式
.box {
  .header {
    color: green;

    // 引用父级元素
    &:hover {
      color: $hoverColor;
      cursor: pointer;
    }
  }
}
ul {
    list-style: none;
}
</style>